iT邦幫忙

DAY 7
2

使用 EZoApp 開發 App 好好玩系列 第 7

Day 7 - EZoApp JQuery Mobile 隱藏版元件 (popup)

  • 分享至 

  • xImage
  •  

前三天介紹了 EZoApp 裡頭可以直接拖拉的 jqm 元件,但其實 jqm 還有一些不錯用的元件並沒有出現在裡頭,因此再來會介紹一下這些好用的元件,也希望大家看了這篇文章之後,可以在 EZoApp 使用這些隱藏版的元件,做出來的東西也會比別人高明許多哇哈哈!

這篇主要介紹 popup 這個彈出視窗的功能,這個功能應該每個人都有看過,而且搞不好有些人一天還會看個兩三次,為什麼呢?因為當 App 當機的時候,就會跳出一個 popup 跟你說應用程式終止~ XD 然而這個功能我們該如何實現呢?就跟我一步一步做下去。
( 範例,點選上方的 preview 就可以預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5702409514909696 )

要實現 popup,有兩個必要的條件要先達成,第一:要有觸發的行為,例如放個按鈕點選之後彈出 popup。第二:要有一個 div 放 popup 的內容,不然 popup 的內容要放在哪裡呢?首先我們先在畫面上放個按鈕,希望點選之後就觸發 popup 的行為。

<a class="ui-btn" data-rel="popup" href="#popup1">Popup 1  ( default )</a>

上面是 button 的程式碼,data-rel="popup" 是指要跳出 popup 的行為,而 href="#popup1" 是指向要跳出的 popup 內容,如果不會寫程式也沒有關係,可以從屬性面板直接設定,只是 href 必須要自己手動輸入。

按鈕完成後,接下來就必須要手動寫程式了,在 HTML 必須要手動加入

<div data-role="popup" id="popup1">大家好我是 popup 1</div>

看到這邊可能會有疑問,放上 div 不是會顯示出來嗎?其實你有沒有發現, div 裡頭有個 data-role="popup",這就表示這個 div 是 popup,只有在你要他出現的時候才會出現囉!然後程式碼裡面的 id,就是剛剛按鈕呼叫 href 裡面的 id 啦!

就這樣我們其實已經完成了 popup,如果需要使用一些特效,可以由屬性面板的 transition 來進行設定,後面會有篇幅專門介紹這些效果。

這是 popup 的範例,點選上方的 preview 就可以預覽:http://jqmdesigner.appspot.com/designer.html#&ref=5702409514909696


上一篇
Day 6 - EZoApp JQuery Mobile 元件介紹 (3)
下一篇
Day 8 - EZoApp JQuery Mobile 隱藏版元件 (Slide Panel)
系列文
使用 EZoApp 開發 App 好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言